------------------------------------------------------------------------------- eFX Skin FAQ v0.21 updated 11/22/98 Maintained by Bryan Beretta Current version can be found at http://thirty4.com/skinfaq.txt ------------------------------------------------------------------------------- Changes since v0.2 -Added info about BTN_EXEC -Fixed some stuff =] Changes since v0.1 -Added info about titlebar text alignment. -Updated the BTN_SIZE information about the new format. OK, there are a bunch of tiny details related to skins that are probably going to generate a lot of questions. So here's an attempt to minimize confusion. =] Skin basics -------------- The basic layout of a skin looks something like this: BEGINTOP RIGHT BUTTON titlebar.bmp STRETCH BTN_MOVE RIGHT BUTTON btn-min.bmp NORMAL BTN_MIN RIGHT BUTTON btn-max.bmp NORMAL BTN_MAX RIGHT BUTTON btn-close.bmp NORMAL BTN_CLOSE ENDTOP BEGINLEFT TOP BUTTON fr-left.bmp STRETCH BTN_SIZE ENDLEFT BEGINRIGHT TOP BUTTON fr-right.bmp STRETCH BTN_SIZE ENDRIGHT BEGINBOTTOM RIGHT BUTTON fr-bottom.bmp STRETCH BTN_SIZE ENDBOTTOM Not too difficult to understand. There's a section specifying what graphics go where for each side of the window. This script would be for a basic layout similar to the default Windows look. Here is the basic syntax of a line: ------------------------------------------------------------------------------- Key ------------------------------------------------------------------------------- How the graphic is justified. Valid options are LEFT and RIGHT. Just use BUTTON for now, I'll explain later. =] The name of the BMP file to be used. How the graphic reacts to the varying condition of window dimensions. Valid options are STRETCH, TILE, and NORMAL. What function the graphic performs when selected/clicked. Valid options are BTN_SIZE_*, BTN_MOVE, BTN_MIN, BTN_MAX, BTN_CLOSE, and BTN_EXEC. The * in BTN_SIZE_* needs to be replaced with the button's location. Valid options are BTN_SIZE_LEFT, BTN_SIZE_RIGHT, BTN_SIZE_TOP, BTN_SIZE_BOTTOM, BTN_SIZE_BOTTOMLEFT, BTN_SIZE_BOTTOMRIGHT, BTN_SIZE_TOPLEFT, and BTN_SIZE_TOPRIGHT. BTN_EXEC allows you to add buttons to run external programs. Just give it a command line argument for your desired program. ie. BTN_EXEC "c:\ultraedit.exe" ------------------------------------------------------------------------------- Text basics -------------- If you have an abnormal/non-standard skin, you may need to modify the way the titlebar text is displayed. Here's a sample section which would appear at the top of the skin script: BEGINTEXT FONT "Arial" 14 BOLD OFFSET 20 2 230 -2 ALIGN LEFT ACTIVECOLOR 000000 INACTIVECOLOR 808080 ENDTEXT It's fairly simple, but the OFFSET stuff may be a little tricky so read on. =] FONT ------------------------------------------------------------------------------- Key ------------------------------------------------------------------------------- The name of the font. If it includes spaces it must be in quotes. Um... =] The format of the text. Valid options are THIN, NORMAL, BOLD, and HEAVY. ------------------------------------------------------------------------------- OFFSET ------------------------------------------------------------------------------- Key ------------------------------------------------------------------------------- This specifies the horizontal range for the titlebar text. This is useful for when you have a skins with abnormal titlebars that don't span the entire width of the window or if the titlebar has graphics you don't want covered up by text. These do the same as above but for vertical placement. Helpful when you have a gap between the window and the titlebar. That might be a little confusing so here's a quick example. Say your title bar has some graphics on the left that you don't want covered up, like Dreamworks for example. Lets say the graphics are 20 pixels wide. In that case, you'd want to make something like 25, that way you pass the graphics and have a small buffer space before the text starts. Lets say those graphics are also on the right side of the titlebar. Make -25, this tells eFX to stop printing text 25 pixels in from the right side. The same applies for the Y settings. applies to the top, and applies to the bottom. So if you want your text to be up 5 pixels from the bottom of the titlebar, give a value of -5. ------------------------------------------------------------------------------- ALIGN ------------------------------------------------------------------------------- Key ------------------------------------------------------------------------------- Pretty self explanatory. Valid options are LEFT, CENTER, and RIGHT ------------------------------------------------------------------------------- ACTIVECOLOR INACTIVECOLOR ------------------------------------------------------------------------------- Key ------------------------------------------------------------------------------- These specify the color in hex RGB. It's the same method used in HTML. ACTIVECOLOR specifies the color of the titlebar text in the active window, INACTIVECOLOR specifies the color of the titlebar text in all the other inactive windows. ------------------------------------------------------------------------------- Misc notes -------------- Now, there are a few things that we came across while messing with skins that would be good to know. So here are a few tips: Corners part A -------------- Corners can be tricky if you want them to look a certain way. Especially if you want rounded corners. If you have the corners as part of a side graphic, they're in danger of being stretched out which could mess up the alignment. And currently, there is a bug with transparency where it doesn't work on stretched images. This results in having nasty pink spots on the corners of your windows. So, the best way to do corners is to make them separate buttons that you stick on either side of the side graphic. Lets take the HoG BLue skin for example. If you notice, the corners are all rounded, which results in a nice clean border. Each corner is a separate graphic. Lets take a look at part of it's script: BEGINBOTTOM LEFT BUTTON cnr-bottomleft.bmp NORMAL BTN_SIZE LEFT BUTTON frm-bottom.bmp STRETCH BTN_SIZE RIGHT BUTTON cnr-bottomright.bmp NORMAL BTN_SIZE ENDBOTTOM As you can see, it starts out with the left corner, then the bottom frame, and following that the right corner. This allows the corners to keep their size no matter what the dimension of the window. It is generally a good idea to use this method whenever you have significant corners. And remember, the top and bottom edges of the window are the sides use the entire length of the window. So when specifying corner graphics, you must have them on the top or bottom frame. Corners part B -------------- Another important thing to know is that eFX calculates justification in regards to the images sizes rather than the window dimensions. Huh? Let me explain. =] Once again lets look at HoG Blue. You'll notice it's buttons in the upper left corner of the window. The way they're done, is they protrude 15 pixels out from the border for the 3 buttons and then it kinda smooths back to 5 pixels into the border. Now, take a look at that bottom right corner. In order to make that align with the right frame, we had to pad it with 15 extra transparent pixels on the right side. Why? because, like I said, eFX calculates justification based on image size. Those extra 15 pixels compensate for the protrusion of the buttons up above. If we didn't have those extra pixels there, the corner would go 15 pixels past the right frame because it would be justified to the edge of the right frame graphics which are 15 pixels wider than the corner graphic. That might sound confusing but if you open up the graphics in Photoshop or something and arrange them to form a border you'll understand better. Justification ------------- There's currently a bug that prevents graphics from justifying to the right side unless there's a graphic before them on the same line. So, for example, you couldn't have nothing but a few buttons as your title bar and have them on the right side. You'd need a graphic of some sort on the tope before them. The way around this for now is to simply make a transparent section and stick it up there before you're desired graphic. --- Well, that's it for right now. HTML version coming soon! -tfboc ------------------------------------------------------------------------------- EoF -------------------------------------------------------------------------------